<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <link href="../../resource/pic/logo.ico" rel="shortcut icon">
    <link type="text/css"  rel="stylesheet" href="../../common/css/common.css">
    <link type="text/css"  rel="stylesheet" href="../../common/lib/font-awesome/css/font-awesome.min.css">
    <link type="text/css"  rel="stylesheet" href="../../../../node_modules/animate.css/animate.min.css">
    <link type="text/css"  rel="stylesheet" href="../../common/lib/element/index.css">
    <title>接口分享</title>
    <style>
        #previewParam .el-tabs__nav-scroll {
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
<div class="container" id="app"  v-cloak>
    <el-row class="row" id="mainPreview" style="background-color: white">
        <el-row class="row" style="font-size: 14px;">
            <el-row class="row" style="height:40px;line-height: 40px;padding-left: 10px;color: #17B9E6">
                {{interface.name}}
            </el-row>
            <el-row class="row" style="height: 1px;background-color: lightgray"></el-row>
            <el-row class="row" style="padding-left: 10px;padding-top: 20px">
                Method:
            </el-row>
            <el-row class="row" style="padding-left: 20px;padding-top: 10px;color: #17b9e6">
                {{interface.method}}
            </el-row>
            <el-row class="row" style="padding-left: 10px;padding-top: 20px">
                Path:
            </el-row>
            <el-row class="row" style="padding-left: 20px;padding-top: 10px;color: #17b9e6">
                {{interface.url}}
            </el-row>
            <el-row class="row" style="padding-left: 10px;padding-top: 20px">
                状态:
            </el-row>
            <el-row class="row" style="padding-left: 20px;padding-top: 10px;">
                {{interface.finish==1?"开发url完成":(interface.finish==2?"已废弃":"开发中")}}
            </el-row>
            <el-row class="row" style="padding-left: 10px;padding-top: 20px">
                描述:
            </el-row>
            <el-row class="row" style="padding-left: 20px;padding-top: 10px;">
                {{interface.remark?interface.remark:"无"}}
            </el-row>
            <el-tabs style="margin-top: 20px" v-model="tabIndex" id="previewParam">
                <template v-for="(item, index) in param">
                    <el-tab-pane :key="item.id"  :label="item.name" :name="index">
                        <expand v-if="paramSave && paramSave.length>0" ref="param">
                            <div slot="title">Restful Param:</div>
                            <el-row class="row" style="padding:0 30px;">
                                <table style="width: 100%;border-collapse: collapse" class="table-hover">
                                    <thead style="color:gray;text-align: center;vertical-align: middle">
                                    <td style="width: 30%">
                                        名称
                                    </td>
                                    <td style="width: 70%">
                                        备注
                                    </td>
                                    </thead>
                                    <tbody>
                                    <template v-for="item in paramSave">
                                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                            <td style="width: 30%">
                                                {{item.name}}
                                            </td>
                                            <td style="width: 70%">
                                                {{item.remark?item.remark:"无"}}
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>
                            </el-row>
                        </expand>
                        <expand v-if="querySave.length>0" ref="query">
                            <div slot="title">Query:</div>
                            <el-row class="row" style="padding:0 30px;">
                                <table style="width: 100%;border-collapse: collapse" class="table-hover">
                                    <thead style="color:gray;text-align: center;vertical-align: middle">
                                    <td style="width: 30%">
                                        名称
                                    </td>
                                    <td style="width: 20%">
                                        是否必填
                                    </td>
                                    <td style="width: 50%">
                                        备注
                                    </td>
                                    </thead>
                                    <tbody>
                                    <template v-for="item in querySave">
                                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                            <td style="width: 30%">
                                                {{item.name}}
                                            </td>
                                            <td style="width: 20%">
                                                {{item.must?"必填":"选填"}}
                                            </td>
                                            <td style="width: 50%">
                                                {{item.remark?item.remark:"无"}}
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>
                            </el-row>
                        </expand>
                        <expand v-if="headerSave.length>0" ref="header">
                            <div slot="title">Http Header:</div>
                            <el-row class="row" style="padding:0 30px;">
                                <table style="width: 100%;border-collapse: collapse" class="table-hover">
                                    <thead style="color:gray;text-align: center;vertical-align: middle">
                                    <td style="width: 30%">
                                        Key
                                    </td>
                                    <td style="width: 30%">
                                        Value
                                    </td>
                                    <td style="width: 40%">
                                        备注
                                    </td>
                                    </thead>
                                    <tbody>
                                    <template v-for="item in headerSave">
                                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                            <td style="width: 30%">
                                                {{item.name}}
                                            </td>
                                            <td style="width: 30%">
                                                {{item.value}}
                                            </td>
                                            <td style="width: 40%">
                                                {{item.remark?item.remark:"无"}}
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>
                            </el-row>
                        </expand>
                        <expand v-if="(interface.method=='PUT' || interface.method=='POST' || interface.method=='PATCH') && (bodySave.length>0 || bodyInfo.type==1)" ref="body">
                            <div slot="title">Body:</div>
                            <el-row class="row" style="padding:0 30px;">
                                <table style="width: 100%;border-collapse: collapse" v-if="bodyInfo.type==0" class="table-hover">
                                    <thead style="color:gray;text-align: center;vertical-align: middle">
                                    <td style="width: 30%">
                                        名称
                                    </td>
                                    <td style="width: 20%">
                                        类型
                                    </td>
                                    <td style="width: 20%">
                                        是否必填
                                    </td>
                                    <td style="width: 30%">
                                        备注
                                    </td>
                                    </thead>
                                    <tbody>
                                    <template v-for="item in bodySave">
                                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                            <td style="width: 30%">
                                                {{item.name}}
                                            </td>
                                            <td style="width: 20%">
                                                {{item.type==0?"文本":"文件"}}
                                            </td>
                                            <td style="width: 20%">
                                                {{item.must?"必选":"选填"}}
                                            </td>
                                            <td style="width: 30%">
                                                {{item.remark?item.remark:"无"}}
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>
                                <el-row v-else-if="bodyInfo.type==1 && bodyInfo.rawType==2">
                                    <el-radio-group size="small" v-model="bodyJSONType">
                                        <el-radio-button :label="0">
                                            JSON
                                        </el-radio-button>
                                        <el-radio-button :label="1">
                                            Table
                                        </el-radio-button>
                                    </el-radio-group>
                                    <el-row class="row" style="margin-top: 10px">
                                        <div v-show="!bodyJSONType">
                                            <template v-for="item in rawJSON">
                                                <div class="row" style="font-size: 14px;min-height: 25px;line-height: 25px;margin: 0;padding: 0;background-color: #fff9e6;word-break: break-all" v-html="item">
                                                </div>
                                            </template>
                                        </div>
                                        <bodyjsonpreview :index="index" :data="item" v-show="bodyJSONType"></bodyjsonpreview>
                                    </el-row>
                                </el-row>
                                <div class="row" style="margin: 0;padding: 0" v-else>
                                    <table style="width: 100%;border-collapse: collapse" class="table-hover">
                                        <thead style="color:gray;text-align: center;vertical-align: middle">
                                        <td style="width: 30%">
                                            类型
                                        </td>
                                        <td style="width: 70%">
                                            备注
                                        </td>
                                        </thead>
                                        <tbody>
                                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                            <td style="width: 30%">
                                                {{bodyInfo.rawType==0?"文本流":"二进制流"}}
                                            </td>
                                            <td style="width: 70%">
                                                {{bodyInfo.rawType==0?(bodyInfo.rawTextRemark?bodyInfo.rawTextRemark:"无"):(bodyInfo.rawFileRemark?bodyInfo.rawFileRemark:"无")}}
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="row" style="margin: 10px 0 0 0;padding: 0" v-if="bodyInfo.rawType==0 && bodyInfo.rawText">
                                        <span style="font-size: 14px;">文本示例:</span>
                                        <pre>{{bodyInfo.rawText}}</pre>
                                    </div>
                                </div>
                            </el-row>
                        </expand>
                        <expand v-if="(outInfo.type==0 && drawMix.length>0) || outInfo.type==1" ref="result">
                            <div slot="title">Result:</div>
                            <el-row class="row" style="padding: 0 30px;">
                                <el-row class="row" v-if="outInfo.type==0 && drawMix.length>0">
                                    <el-radio-group size="small" v-model="outJSONType">
                                        <el-radio-button :label="0">
                                            JSON
                                        </el-radio-button>
                                        <el-radio-button label="1">
                                            Table
                                        </el-radio-button>
                                    </el-radio-group>
                                    <el-row class="row" style="margin-top: 10px">
                                        <div v-show="!outJSONType">
                                            <template v-for="item in drawMix">
                                                <div class="row" style="font-size: 14px;min-height: 25px;line-height: 25px;margin: 0;padding: 0;background-color: #fff9e6;word-break: break-all" v-html="item">
                                                </div>
                                            </template>
                                        </div>
                                        <outjsonpreview :index="index" :data="item" v-show="outJSONType"></outjsonpreview>
                                    </el-row>
                                </el-row>
                                <table style="width: 100%;border-collapse: collapse" v-if="outInfo.type==1" class="table-hover">
                                    <thead style="color:gray;text-align: center;vertical-align: middle">
                                    <td style="width: 20%">
                                        类型
                                    </td>
                                    <td style="width: 50%">
                                        备注
                                    </td>
                                    <td style="width: 30%">
                                        Mock
                                    </td>
                                    </thead>
                                    <tbody>
                                    <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                        <td style="width: 20%">
                                            RAW
                                        </td>
                                        <td style="width: 50%">
                                            {{outInfo.rawRemark?outInfo.rawRemark:"无"}}
                                        </td>
                                        <td style="width: 30%">
                                            {{rawMock}}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </el-row>
                        </expand>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </el-row>
    </el-row>
</div>
<script src="../../../dist/vendor.bundle.js"></script>
<script src="../../common/lib/element/index.js"></script>
<script src="../../../dist/share.js"></script>
</body>
</html>